import React, { useState, useEffect } from "react"
import "./myProject.less"
import { observer } from 'mobx-react-lite'
import useStore from "@/context/useStore"
import { Tabs , Progress } from 'antd';
import { selectClassPlanItem , selectClassPlanInitItem , SelectChildrenList , SelectChildrenMyProject, viewSortItem} from '@/utils/viewPlan'
import { GetSelectClassPlan } from '@/services';

import { ProjectViewPlanViewItem } from "@/utils/students/viewPlanItem";

const PlanList: React.FC = () => {
    let arr = ['未开始','进行中','已结束'];
    let ViewItemName = ['胡同学' , "王冠" , "杨明辉" , "黄琼" , "徐锦阳",
    "赵同学",
    "古昌军",
    "黄辉",
    "高健要",
    "牛莉"];
    const [carIndex, setcarIndex] = useState(0) //tab  下标
    const { TabPane } = Tabs;
    function callback(key:any) {
        console.log(key);
    }

    let { selectClassPlan } = useStore();

    useEffect(() => {
        selectClassPlan.GetViewValue();
        console.log(selectClassPlan.ViewValue.projectName);
        
    }, [])

    // 改变下拉列表
    function changeFlagEvent(Index : number){
        
        let NewFlag = [ ...FlagArray ]
        let Change = NewFlag.map( (item,index)=>{
            if( index == Index )
            {
                // console.log(item,!item);
                
                return !item;
            }
            return item
        } )
        // console.log(Change);
        SetFlagArray(Change)

    }


    let [ selectClassPlanValue , SetSelectClassPlanValue ] = useState<selectClassPlanItem[]>([]) 
    // let DefaultValue :selectClassPlanItem  = {} as selectClassPlanItem;

    let [ CurrentID , SetCurrtenID ] = useState('');

    let [ FlagArray , SetFlagArray ] = useState( [ false ] );

    return (
        <div className='planlist'>
            <div className="title_type2">
                <Tabs defaultActiveKey="1"  size="large" onChange={callback}>
                <TabPane tab="小组项目"  key="1">
                <div className='div_span'>
                {
                    arr.map((item,index)=>{
                        return <span key={index} onClick={() => setcarIndex(index)}
                        className={carIndex==index?`active${index}`:`span${index}`} >{item}</span>
                    })
                }
                
                </div>
                <div className="viewPlanTable">
                <div className="Planbottoms">
                <h4>演示计划</h4>
                <p className="pp">项目 1 个 |时长 48 天</p>
                <p className="pp">2021-05-14 00:00:00~2021-06-30 00:00:00</p>
                <p className="pps">完成进度</p>
                <Progress percent={16} strokeColor="#f95"/>
                </div>
                <div className="Planbottom">
                    <div className="bottom-top">
                        <h4>示例项目</h4>
                        <p className="bottom-tops">项目 1 个 |时长 48 天</p>
                        <p className="bottom-tops">2021-05-14 00:00:00~2021-06-30 00:00:00</p>
                    </div>
                    <Progress percent={16} strokeColor="#f95"/>
                    <div className="ViewItemTB">
                        {ViewItemName.map((item , index )=>{
                            return <li className="Tblist" key={index}>{item}</li>
                        })}
                    </div>
                </div>
            </div>
                </TabPane>
                <TabPane tab="收藏项目" key="2">
                <div className="box1">
                    <div className="span">
                        <div className="spans">实例项目</div>
                        <div className="spana">专业群实训</div>
                    </div>
                </div>
                <div className="box2">
                    < div className="span">
                        <div className="spans">实例项目</div>
                        <div className="spana">专业群实训</div>
                    </div>
                </div>
                <div className="box3">
                    <div className="span">
                        <div className="spans">实例项目</div>
                        <div className="spana">专业群实训</div>
                    </div>
                </div>
                </TabPane>
            </Tabs>
            </div>
            
            
        </div>
    )
}

export default observer(PlanList)